import React, { memo, useState, useEffect } from "react";
import "./Explore.css";
import Scroll from "../../baseUI/scroll";
import { forceCheck } from "react-lazyload";
import { connect } from "react-redux";
import { renderRoutes } from "react-router-config";
import { useHistory } from "react-router-dom";

import * as api from "@/api";
import * as actionTypes from "./store/actionCreators";

import { Page } from "../../assets/global-style";

import Discover from "../../components/explore/discover/Discover";
import Classify from "../../components/explore/classify/Classify";
import Search from "../../components/explore/search/Search";
import Popup from "../../components/explore/popup/Popup";
import Menu from "../../components/explore/menu/Menu";

const Explore = (props) => {
  //路由
  let { route } = props;

  const history = useHistory();

  const [showPopup, setShowPopup] = useState(false);
  const [menuDisplay, setMenuDisplay] = useState(0);
  const [display, setDisplay] = useState(false);
 
  // 属性
  const { explorestate } = props;
  const { popupData = [], menuData = [], classifyData = [] } = explorestate;

  //动作
  const { getExploreDataDispatch } = props;
  useEffect(() => {
    getExploreDataDispatch();
  }, []);

  //discover数据的获取
  let [page, setPage] = useState(1);
  let [discover, setDiscover] = useState([]);
  const fetchDiscover = () => {
    api.reqdiscover(page).then((res) => {
      setDiscover([...discover, ...res.data.data.list]);
    });
  };
  useEffect(() => {
    fetchDiscover();
  }, [page]);

  // 上拉加载
  const handlePullUp = () => {
    console.log("上拉刷新");
    setPage(++page);
  };
  // 下拉刷新
  const handlePullDown = () => {
    console.log("下拉刷新");
  };

  // popup 组件的显示与否
  const handleOnclick = () => {
    setShowPopup(!showPopup);
  };

  //转到二级页面 Map页面
  const goToMap = () => {
    history.push("/explore/map");
  };

  return (
    <Page>
      <Search handleOnclick={() => handleOnclick()} goToMap={() => goToMap()} />
      <Popup
        popupData={popupData}
        handleOnclick={() => handleOnclick()}
        display={showPopup}
      />
      <Scroll
        direction={"vertical"}
        refresh={false}
        pullUp={handlePullUp}
        pullDown={handlePullDown}
        onScroll={(e) => {
          if (e.y < -1142) {
            setMenuDisplay(1);
          } else {
            setMenuDisplay(0);
          }
          forceCheck();
        }}
      >
        <div className="explore_padding">
          <Classify classifyData={classifyData} />
          <Menu menuData={menuData} />
          <Discover discover={discover} />
        </div>
      </Scroll>

      {/* 开启子路由 */}
      {renderRoutes(route.routes)}
    </Page>
  );
};
const mapStateToDispatch = (dispatch) => {
  return {
    getExploreDataDispatch() {
      dispatch(actionTypes.getExploreData());
    },
  };
};
const mapStateToProps = (state) => {
  return {
    explorestate: state.explore.exploredata,
  };
};
export default connect(mapStateToProps, mapStateToDispatch)(memo(Explore));
